<template>
    <div class="container">
        <div class="header">
            <div class="group">
                <Button type="success" class="output-btn">数据导出</Button>
                <Input search placeholder="请输入证件号" style="margin-right: 10px; width: 200px;" />
                <DatePicker type="date" multiple placeholder="选择开始时间" style="width: 200px; margin-right: 5px;"></DatePicker>
                <DatePicker type="date" multiple placeholder="选择结束时间" style="width: 200px; margin-right: 10px;"></DatePicker>
            </div>
            <div class="total-num">总记录: 6853条</div>
        </div>
        <!--<div class="op-frame">-->
            <!---->
        <!--</div>-->
        <div class="content">
            <Table width="100%" height="auto" border :columns="columns2" :data="data4"></Table>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      columns2: [
        {
          title: '状态',
          key: 'staus',
          width: 100,
          align: 'center',
          fixed: 'left',
          filters: [
            {
              label: '待提报',
              value: '待提报'
            },
            {
              label: '已提报',
              value: '已提报'
            },
            {
              label: '已审核',
              value: '已审核'
            },
            {
              label: '待审核',
              value: '待审核'
            }
          ],
          filterMultiple: false,
          filterMethod (value, row) {
            if (value === '待提报') {
              return row.staus === '待提报'
            } else if (value === '已提报') {
              return row.staus === '已提报'
            } else if (value === '已审核') {
              return row.staus === '已审核'
            } else if (value === '待审核') {
              return row.staus === '待审核'
            }
          }
        },
        {
          title: '姓名',
          key: 'name',
          width: 100,
          align: 'center'
        },
        {
          title: '性别',
          key: 'sex',
          width: 100,
          align: 'center',
          filters: [
            {
              label: '男',
              value: '男'
            },
            {
              label: '女',
              value: '女'
            }
          ],
          filterMultiple: false,
          filterMethod (value, row) {
            if (value === '男') {
              return row.sex === '男'
            } else if (value === '女') {
              return row.sex === '女'
            }
          }
        },
        {
          title: '年龄',
          key: 'age',
          width: 100,
          align: 'center',
          sortable: true
        },
        {
          title: '证件类型',
          key: 'card_type',
          align: 'center',
          width: 150
        },
        {
          title: '证件号',
          key: 'card_no',
          align: 'center',
          width: 200
        },
        {
          title: '联系电话',
          key: 'tel',
          align: 'center',
          width: 150
        },
        {
          title: '隔离时间',
          key: 'glsj',
          align: 'center',
          width: 150
        },
        {
          title: '隔离方式',
          key: 'glfs',
          align: 'center',
          width: 150
        },
        {
          title: '隔离管理单位',
          key: 'gldw',
          align: 'center',
          width: 150
        },
        {
          title: '隔离管理人',
          key: 'glr',
          align: 'center',
          width: 150
        },
        {
          title: '隔离地点',
          key: 'dd',
          align: 'center',
          width: 150
        },
        {
          title: '楼号',
          key: 'lh',
          align: 'center',
          width: 100
        },
        {
          title: '楼层',
          key: 'lc',
          align: 'center',
          width: 100
        },
        {
          title: '房间号',
          key: 'fjh',
          align: 'center',
          width: 150
        },
        {
          title: '操作',
          align: 'center',
          key: 'action',
          fixed: 'right',
          width: 200,
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '提报'),
              h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '编辑'),
              h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '删除'),
              h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '审批'),
              h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '详情'),
              h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '发布')
            ])
          }
        }
      ],
      data4: [
        {
          staus: '已提报',
          name: '刘洪梅',
          sex: '女',
          age: '57',
          card_type: '身份证',
          card_no: '210104196308130360',
          tel: '13840354053',
          glsj: '2020-03-18',
          glfs: '集中隔离',
          gldw: '世纪招待所',
          glr: '张荣',
          dd: '',
          lh: '4',
          lc: '2',
          fjh: '03'
        },
        {
          staus: '待提报',
          name: '白月华',
          sex: '女',
          age: '43',
          card_type: '身份证',
          card_no: '230108197706210626',
          tel: '130****9990',
          glsj: '2020-03-25',
          glfs: '居家隔离',
          gldw: '市民政局',
          glr: '张荣',
          dd: '',
          lh: '4',
          lc: '2',
          fjh: '03'
        },
        {
          staus: '待提报',
          name: '卢淑兰',
          sex: '女',
          age: '39',
          card_type: '身份证',
          card_no: '210104196104243128',
          tel: '15524077572',
          glsj: '2020-03-19',
          glfs: '居家隔离',
          gldw: '市民政局',
          glr: '张荣',
          dd: '家',
          lh: '4',
          lc: '2',
          fjh: '03'
        },
        {
          staus: '待提报',
          name: '安治豪',
          sex: '男',
          age: '16',
          card_type: '身份证',
          card_no: '210104200405012816',
          tel: '13840050499',
          glsj: '2020-03-25',
          glfs: '居家隔离',
          gldw: '市民政局',
          glr: '张荣',
          dd: '家',
          lh: '4',
          lc: '2',
          fjh: '03'
        },
        {
          staus: '待提报',
          name: '王利杰',
          sex: '男',
          age: '39',
          card_type: '身份证',
          card_no: '222405197008284246',
          tel: '13066700929',
          glsj: '2020-03-25',
          glfs: '居家隔离',
          gldw: '市民政局',
          glr: '赵继',
          dd: '',
          lh: '4',
          lc: '2',
          fjh: '03'
        },
        {
          staus: '待提报',
          name: '张杰',
          sex: '男',
          age: '39',
          card_type: '身份证',
          card_no: '210121197610054929',
          tel: '13066669990',
          glsj: '2020-03-22',
          glfs: '居家隔离',
          gldw: '市民政局',
          glr: '张荣',
          dd: '',
          lh: '4',
          lc: '2',
          fjh: '03'
        },
        {
          staus: '待审核',
          name: '孟庆林',
          sex: '男',
          age: '39',
          card_type: '身份证',
          card_no: '210103196201242737',
          tel: '13709885594',
          glsj: '2020-03-25',
          glfs: '居家隔离',
          gldw: '市民政局',
          glr: '',
          dd: '家',
          lh: '4',
          lc: '2',
          fjh: '03'
        },
        {
          staus: '已提报',
          name: '苗馨芳',
          sex: '女',
          age: '20',
          card_type: '身份证',
          card_no: '210104200004300921',
          tel: '130****9990',
          glsj: '2020-03-25',
          glfs: '居家隔离',
          gldw: '市民政局',
          glr: '刘波',
          dd: '家',
          lh: '4',
          lc: '2',
          fjh: '03'
        },
        {
          staus: '已审核',
          name: '孙诗瑶',
          sex: '女',
          age: '39',
          card_type: '身份证',
          card_no: '210104199303243124',
          tel: '13066621416',
          glsj: '2020-03-25',
          glfs: '居家隔离',
          gldw: '市民政局',
          glr: '张荣',
          dd: '家',
          lh: '4',
          lc: '2',
          fjh: '03'
        },
        {
          staus: '待提报',
          name: '晏艺娜',
          sex: '女',
          age: '23',
          card_type: '身份证',
          card_no: '36012419970729256',
          tel: '130****9990',
          glsj: '2020-03-25',
          glfs: '居家隔离',
          gldw: '市民政局',
          glr: '',
          dd: '家',
          lh: '4',
          lc: '2',
          fjh: '03'
        },
        {
          staus: '待提报',
          name: '郑慧文',
          sex: '男',
          age: '39',
          card_type: '身份证',
          card_no: '2210104200005111727',
          tel: '15566183686',
          glsj: '2020-03-23',
          glfs: '居家隔离',
          gldw: '市民政局',
          glr: '张荣',
          dd: '家',
          lh: '4',
          lc: '2',
          fjh: '03'
        },
        {
          staus: '待提报',
          name: '赵艳丽',
          sex: '女',
          age: '63',
          card_type: '身份证',
          card_no: '210103195707261812',
          tel: '13236608891',
          glsj: '2020-03-21',
          glfs: '居家隔离',
          gldw: '市民政局',
          glr: '张荣',
          dd: '家',
          lh: '4',
          lc: '2',
          fjh: '03'
        },
        {
          staus: '待提报',
          name: '杨子奇',
          sex: '男',
          age: '39',
          card_type: '身份证',
          card_no: '210104199512170515',
          tel: '18813154972',
          glsj: '2020-03-25',
          glfs: '居家隔离',
          gldw: '市民政局',
          glr: '',
          dd: '家',
          lh: '4',
          lc: '2',
          fjh: '03'
        },
        {
          staus: '待提报',
          name: '孙博',
          sex: '男',
          age: '39',
          card_type: '身份证',
          card_no: '210104199309213719',
          tel: '13005509990',
          glsj: '2020-03-25',
          glfs: '居家隔离',
          gldw: '市民政局',
          glr: '张荣',
          dd: '家',
          lh: '4',
          lc: '2',
          fjh: '03'
        },
        {
          staus: '待提报',
          name: '安福来',
          sex: '男',
          age: '70',
          card_type: '身份证',
          card_no: '210121195007084614',
          tel: '15902408424',
          glsj: '2020-03-25',
          glfs: '居家隔离',
          gldw: '市民政局',
          glr: '张荣',
          dd: '家',
          lh: '4',
          lc: '2',
          fjh: '03'
        },
        {
          staus: '待提报',
          name: '杨勇',
          sex: '男',
          age: '39',
          card_type: '身份证',
          card_no: '210422196902102513',
          tel: '13470522165',
          glsj: '2020-03-23',
          glfs: '居家隔离',
          gldw: '市民政局',
          glr: '',
          dd: '家',
          lh: '4',
          lc: '2',
          fjh: '03'
        },
        {
          staus: '已提报',
          name: '侯秀丽',
          sex: '女',
          age: '47',
          card_type: '身份证',
          card_no: '152322197304190044',
          tel: '15640067945',
          glsj: '2020-03-20',
          glfs: '居家隔离',
          gldw: '市民政局',
          glr: '张荣',
          dd: '家',
          lh: '4',
          lc: '2',
          fjh: '03'
        },
        {
          staus: '待提报',
          name: '金大仲',
          sex: '男',
          age: '39',
          card_type: '身份证',
          card_no: '220521199001040014',
          tel: '13067335379',
          glsj: '2020-03-21',
          glfs: '集中隔离',
          gldw: '市民政局',
          glr: '张荣',
          dd: '家',
          lh: '4',
          lc: '2',
          fjh: '03'
        },
        {
          staus: '待提报',
          name: '任志秋',
          sex: '男',
          age: '60',
          card_type: '身份证',
          card_no: '210103196001114220',
          tel: '15640256599',
          glsj: '2020-03-25',
          glfs: '',
          gldw: '市民政局',
          glr: '张荣',
          dd: '家',
          lh: '4',
          lc: '2',
          fjh: '03'
        },
        {
          staus: '待提报',
          name: '杜俸萱',
          sex: '女',
          age: '39',
          card_type: '身份证',
          card_no: '211202200112200518',
          tel: '13865654291',
          glsj: '2020-03-23',
          glfs: '居家隔离',
          gldw: '市民政局',
          glr: '张荣',
          dd: '家',
          lh: '4',
          lc: '2',
          fjh: '03'
        },
        {
          staus: '已提报',
          name: '何玉波',
          sex: '女',
          age: '48',
          card_type: '身份证',
          card_no: '210423197212150818',
          tel: '13109891973',
          glsj: '2020-03-23',
          glfs: '居家隔离',
          gldw: '市民政局',
          glr: '张荣',
          dd: '家',
          lh: '4',
          lc: '2',
          fjh: '03'
        },
        {
          staus: '待审核',
          name: '关国宏',
          sex: '男',
          age: '47',
          card_type: '身份证',
          card_no: '210121197311075527',
          tel: '13082465747',
          glsj: '2020-03-25',
          glfs: '居家隔离',
          gldw: '',
          glr: '张荣',
          dd: '家',
          lh: '4',
          lc: '2',
          fjh: '03'
        }
      ]
    }
  }
}
</script>

<style scoped>
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }
    .op-frame {
        flex-direction: column;
        border: 1px solid #abdcff;
        background-color: #f0faff;
        padding: 8px 16px 8px 16px;
        display: flex;
    }
    .group {
        display: flex;
    }
    .output-btn {
        margin-right: 10px;
    }
</style>
